<template>
  <div>
    <Search :placeholder="placeholder" />
    <van-tree-select
      :items="types"
      height="85vh"
      :main-active-index="activeindex"
      @click-nav="leftfn"
    >
      <template slot="content" class="con">

          <div v-for="(item, index) in contentsright" :key="index">
            <img :src="item.image" alt="" />
            <h3>{{ item.text }}</h3>
          </div>

      </template>
    </van-tree-select>
    <TarBar />
  </div>
</template>
<script>
import TarBar from "../components/TarBar.vue";
import Search from "../components/Search.vue";
import instance from "../api/api.js";

export default {
  name: "TypeView",
  data() {
    return {
      placeholder: "高效学习法正版",
      activeindex: 0, // 默认选中
      types: [], // 存放请求的数据
      contentsright: [],
    };
  },
  components: {
    TarBar,
    Search,
  },
  methods: {
    leftfn(item) {
      this.activeindex = item;
      this.contentsright = this.types[item].children;
      var top = document.getElementsByClassName('van-tree-select__content')
      top[0].scrollTop = 0
    },
    async gettypes() {
      let { data } = await instance.get("/types");
      this.types = data;
      this.contentsright = this.types[this.activeindex].children;
    },
  },
  created() {
    this.gettypes();
  },
};
</script>
<style scoped lang="less">
.van-tree-select__content{
  display:flex;
  flex-wrap:wrap;
  div{
    width: 33%;
    text-align:center;
  }
}
</style>